import React, { useState, useEffect } from 'react';
import './index.css';
import { LeftOutlined } from '@ant-design/icons';
import { history } from 'umi';
import axios from 'axios';

export default function () {
  // 获取数据
  const [data, setdata] = useState([]);

  const getdata = async () => {
    let { data } = await axios.get('http://localhost:3000/yrt/datalist');
    setdata(data.data);
  };

  useEffect(() => {
    getdata();
  }, []);
  return (
    <div id="app">
      {/* 头部导航栏 */}
      <div className="top-wrapper">
        <div className="top-box1">
          <LeftOutlined onClick={() => history.go(-1)} />
          &nbsp;本周热门
        </div>
        <div className="top-box2"></div>
      </div>
      {/* 内容 */}
      <div className="content-warpper">
        {data.map((item) => (
          <div className="content-box">
            <div className="img">
              <img src={item.img} alt="" />
            </div>
            <div className="box">
              <div className="zi">
                {item.title}
                <div className="price">{item.jinbinum}币</div>
              </div>
              <div>
                <div className="dui">马上兑</div>
                <div
                  style={{
                    color: '#153, 153, 153',
                    fontSize: '6px',
                    marginTop: '2px',
                  }}
                >
                  已兑换1件
                </div>
              </div>
            </div>
            <hr style={{ color: '#eee' }} />
          </div>
        ))}
      </div>
    </div>
  );
}
